<script setup>
import VScaleScreen from "v-scale-screen";
import HeaderIndex from "@/components/header/index.vue";
import MainIndex from "@/components/main/index.vue";
import MainLeft from "@/components/left/index.vue";
import MainRight from "@/components/right/index.vue";
</script>

<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
    <div class="content_wrap">
      <header-index></header-index>
      <div class="main-container">
        <main-left class="left"></main-left>
        <main-index class="center"></main-index>
        <main-right class="right"></main-right>
      </div>
    </div>
  </v-scale-screen>
</template>
<style scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  color: #d3d6dd;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/imgs/bg.png");
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
}

.header {
  /* 头部高度根据实际内容自适应（或固定高度） */
  flex-shrink: 0;
  /* 防止头部被压缩 */
}

.main-container {
  margin-top: 20px;
  /* 占据剩余所有空间 */
  flex: 1;
  display: flex;
  /* 子组件水平排列 */
  gap: 10px;
  /* 组件之间的间距（可选） */
  overflow: hidden;
  /* 防止内容溢出 */
}

.left {
  flex: 2;
}

.center {
  flex: 5;
}

.right {
  flex: 2;
}
</style>
